<template>
  <div>
    <el-descriptions
      title="联系人信息"
      v-for="(item, index) in contacts"
      :key="'contact' + index"
    >
      <el-descriptions-item label="联系人姓名">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.contactName"
          style="background-color: rgba(255, 255, 255, 0.247)"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.contactPhone"
          oninput="value=value.replace(/(^((13[0-9])|(14[0,1,4-9])|(15[0-3,5-9])|(16[2,5,6,7])|(17[0-8])|(18[0-9])|(19[0-3,5-9]))\d{8}$) | (^(5|6|8|9)\d{7}$)/g, '')"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="座机号">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.contactTelephone"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="传真号">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.contactFax"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="电子邮箱">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.contactEmail"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.contactRemark"
          clearable
        ></el-input>
      </el-descriptions-item>
      <template slot="extra">
        <el-tooltip content="新增联系人" placement="top">
          <el-button
            type="primary"
            size="media"
            @click="addContact"
            circle
            icon="el-icon-plus"
            v-if="index === contacts.length - 1"
          />
        </el-tooltip>
        <el-tooltip content="删除本项" placement="top">
          <el-button
            type="danger"
            size="media"
            circle
            icon="el-icon-delete"
            @click="removeContact(index)"
            v-if="contacts.length > 1"
          />
        </el-tooltip>
      </template>
    </el-descriptions>
    <el-divider></el-divider>

    <el-descriptions
      title="公司主要产品"
      v-for="(item, index) in products"
      :key="'product' + index"
    >
      <el-descriptions-item label="产品名称">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.companyProduct"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="年产量">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.yearlyCapacity"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="批准文号">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.authenticationCode"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="批文有效期始">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.indateStart"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="批文有效期止">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.indateEnd"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.companyRemark"
          clearable
        ></el-input>
      </el-descriptions-item>
      <template slot="extra">
        <el-tooltip content="新增主要产品" placement="top">
          <el-button
            type="primary"
            size="media"
            @click="addProduct"
            circle
            icon="el-icon-plus"
            v-if="index === products.length - 1"
          />
        </el-tooltip>
        <el-tooltip content="删除本项" placement="top">
          <el-button
            type="danger"
            size="media"
            circle
            icon="el-icon-delete"
            @click="removeProduct(index)"
            v-if="products.length > 1"
          />
        </el-tooltip>
      </template>
    </el-descriptions>
    <el-divider></el-divider>

    <el-descriptions
      title="公司主要客户"
      v-for="(item, index) in customers"
      :key="'customer' + index"
    >
      <el-descriptions-item label="客户名称">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.customerName"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="联系人">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.customerContactUser"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.customerContactPhone"
          @blur="isPhone(item.customerContactPhone)"
          clearable
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-input
          class="el-input--mediumm"
          placeholder="请输入内容"
          v-model="item.customerRemark"
          clearable
        ></el-input>
      </el-descriptions-item>
      <template slot="extra">
        <el-tooltip content="新增主要客户" placement="top">
          <el-button
            type="primary"
            size="media"
            @click="addCustomer"
            circle
            icon="el-icon-plus"
            v-if="index === customers.length - 1"
          />
        </el-tooltip>
        <el-tooltip content="删除本项" placement="top">
          <el-button
            type="danger"
            size="media"
            @click="removeCustomer(index)"
            circle
            icon="el-icon-delete"
            v-if="customers.length > 1"
          />
        </el-tooltip>
      </template>
    </el-descriptions>
    <el-row>
      <el-button class="skip-finsh" @click="skipInfoCommit">跳过</el-button>
      <el-button type="primary" class="skip-finsh" @click="Commit"
        >完成</el-button
      >
    </el-row>
  </div>
</template>

<script>
class Cantact {
  constructor() {
    this.contactEmail = "";
    this.contactFax = "";
    this.contactName = "";
    this.contactPhone = "";
    this.contactRemark = "";
    this.contactTelephone = "";
  }
}

class Customer {
  constructor() {
    this.customerContactPhone = "";
    this.customerContactUser = "";
    this.customerName = "";
    this.customerRemark = "";
  }
}

class Product {
  constructor() {
    this.authenticationCode = "";
    this.companyProduct = "";
    this.companyRemark = "";
    this.indateEnd = "";
    this.indateStart = "";
    this.yearlyCapacity = "";
  }
}

export default {
  props: {
    otherContacts: {
      type: Array,
      default: [],
    },
    otherCustomers: {
      type: Array,
      default: [],
    },
    otherProducts: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      labelPosition: "left",
      contacts: [new Cantact()],
      customers: [new Customer()],
      products: [new Product()],
    };
  },
  methods: {
    // 联系人新增、删除
    addContact() {
      this.contacts.push(new Cantact());
    },
    removeContact(index) {
      this.contacts.splice(index, 1);
    },

    // 产品新增、删除
    addProduct() {
      this.products.push(new Cantact());
    },
    removeProduct(index) {
      this.products.splice(index, 1);
    },

    // 客户新增、删除
    addCustomer() {
      this.products.push(new Cantact());
    },
    removeCustomer(index) {
      this.products.splice(index, 1);
    },

    // 跳过提交
    skipInfoCommit() {
      this.$emit("register");
    },
    // 提交
    Commit() {
      this.otherContacts.push.apply(this.otherContacts, this.contacts);
      this.otherCustomers.push.apply(this.otherCustomers, this.customers);
      this.otherProducts.push.apply(this.otherProducts, this.products);
      this.$emit("register");
    },
  },
};
</script>

<style >
.el-descriptions-item__label {
  width: 88px;
  line-height: 36px;
  text-align: center;
}
</style>
<style scoped>

.el-descriptions /deep/.el-descriptions__body {
  color: #000000;
  font-size: 12px;
  background-color: transparent;
}


.el-input /deep/ .el-input__inner {
  background-color: rgba(255, 255, 255, 0.247);
}
p {
  text-align: center;
  font-size: 25px;
  margin-bottom: 50px;
}

.content {
  border: 1px solid;
  border-radius: 2px;
  margin: 0 auto;
  width: 500px;
  height: 300px;
}
.content > ol li {
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  margin: 10px 0;
}
.el-descriptions {
  padding: 0 10px;
}

.el-input--mediumm {
  width: 160px;
}
.el-row {
  display: flex;
  justify-content: space-around;
}
.skip-finsh {
  width: 160px;
  margin: 20px 0;
}
</style>